<template>
  <div>
    <myheader></myheader>
    <h2>用户中心</h2>
    {{ user.username }}<br>
    手机号{{ user.mobile | mobilefilter }}<br>
    头像
    <van-image
      width="100"
      height="100"
      :src="url"
    />
    <br>
    上传头像：
    <van-uploader :after-read="upload"/>
    多文件上传控件:
    <van-uploader v-model="fileList" multiple :max-count="3"  :after-read="uploadmul"/>
  </div>
</template>

<script>
import myheader from "./myheader";

export default {
  name: "userinfo",
  data() {
    return {
      user: {},
      userid: localStorage.getItem('userid'),
      url: '',
      filalist:[]
    }
  },
  //定义过滤器
  filters: {
    //手机号隐藏中间6位
    mobilefilter(value) {
      if(value){
        return value.slice(0, 3) + "******" + value.slice(-3, -1)
      }
      return value
    },
  },
  methods: {
    //获取用户
    getUserinfo() {
      this.$axios.get('users/getuserinfo?userid=' + this.userid).then(res => {
        this.user = res.data.user
        this.url = this.up_upload_dir+this.userid+"/"+res.data.user.avater
      })
    },
    //单文件上传
    upload(file) {
      // 此时可以自行将文件上传至服务器
      let data = new FormData()
      data.append('file', file.file)
      data.append('userid', this.userid)
      this.$axios.post('users/upload', data).then(res => {
        //更新展示图片的地址
        this.url = this.upload_dir + this.userid + "/" + res.data.filename
      })
    },
    //多文件上传控件
    uploadmul(){
      //遍历fileList,this.fileList.length获取长度
      for(var i=0;i<this.fileList.length;i++){
        var file = this.fileList[i]
        this.upload(file)
      }
    }
  },
  mounted() {
    this.getUserinfo()
  },
  components: {
    'myheader': myheader
  }
}
</script>

<style scoped>

</style>
